$(document).ready(function(){
	
	// Define backbone views/ collection for friend-related entity
	Invitesq.friendBoxTemplate = function() {
		return '' +
		'<h3>Friend related to this event</h3>' +
		'<h4>Going</h4>' +	
		'<div id="friend-going" class="friend-section">' +
		'</div>' +
		'<h4>Not yet invited</h4>' +	
		'<div id="friend-other" class="friend-section">' +
		'</div>' +
		'<h4>Not going</h4>' +
		'<div id="friend-rejected" class="friend-section">' +
		'</div>' ;
	};
	// View template for each friend thumb 
	Invitesq.friendThumbTemplate = function() {
		friendURL = "https://graph.facebook.com/<%= id%>/picture"
		return '' +
		'<img class="pic" src="' + friendURL + '" /> <%= name %>' ;
	};
	
	// Define Friend global collection, model, router
	Invitesq.FriendModel = Backbone.Model.extend();
	Invitesq.FriendCollection = Backbone.Collection.extend({
		model: Invitesq.FriendModel
	});
	
	// Define one instance of FriendCollection 
	Invitesq.userFriendsList = new Invitesq.FriendCollection();
	// Friend categories can be filtered by 'underscore's filter' or 'collection's where' 
	
	
	// Define Friend Thumb View
	Invitesq.FriendThumbView = Backbone.View.extend({
		tagName: "div",
		className: "friend-thumb",
		template: _.template(Invitesq.friendThumbTemplate()),
		
		initialize: function() {
			_.bindAll(this,"render");
		},
		
		render: function() {
			$(this.el).html(this.template(this.model.toJSON()));
			return this;
		},
	});
	
	// Define a Friend Box Collection View 
	Invitesq.FriendBoxView = Backbone.View.extend({
		tagName: "div",
		//className: "box",
		template: _.template(Invitesq.friendBoxTemplate()),
		group_other_size: 5,
		
		initialize: function() {
			_.bindAll(this,"render");
		},
		
		render: function() {
			var $this = this;

			// Render the template
			$(this.el).html(this.template);
						
			// Append user to different group
			var friendOther = this.$('#friend-other');
			if (this.collection)
			
				// First group
				this.collection.every(function(friend, index){
					console.log("Friend index " + index);
					friendThumb = new Invitesq.FriendThumbView({
						model: friend
					});
					friendOther.append(friendThumb.render().$el);
					return (index+1 < $this.group_other_size);
				});
				
			return this;
		}
		
	});
	
});
	